<template>
  <div class="box">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div ref="chart" style="height:600px;"></div>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.getEchartData();
    },
    methods: {
      getEchartData() {
        let myChart = this.$echarts.init(this.$refs.chart);
        this.$ajax.get("/report/getSetmealReport").then(res => {
          myChart.setOption({
            title: {
              text: '套餐预约占比',
              subtext: '',
              x: 'center'
            },
            //提示框组件
            tooltip: {
              //触发类型，在饼形图中为item
              trigger: 'item',
              //提示内容格式
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            //图例
            legend: {
              orient: 'vertical',
              left: 'left',
            },
            //数据系列
            series: [
              {
                name: '套餐预约占比',
                //饼形图
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: res.data,
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          });
        });

        // myChart.setOption({
        //   title: {
        //     text: '套餐预约占比',
        //     subtext: '',
        //     x: 'center'
        //   },
        //   //提示框组件
        //   tooltip: {
        //     //触发类型，在饼形图中为item
        //     trigger: 'item',
        //     //提示内容格式
        //     formatter: "{a} <br/>{b} : {c} ({d}%)"
        //   },
        //   //图例
        //   legend: {
        //     orient: 'vertical',
        //     left: 'left',
        //     data: this.$mock.report.setmeal.names
        //   },
        //   //数据系列
        //   series: [
        //     {
        //       name: '套餐预约占比',
        //       //饼形图
        //       type: 'pie',
        //       radius: '55%',
        //       center: ['50%', '60%'],
        //       data: this.$mock.report.setmeal.count,
        //       itemStyle: {
        //         emphasis: {
        //           shadowBlur: 10,
        //           shadowOffsetX: 0,
        //           shadowColor: 'rgba(0, 0, 0, 0.5)'
        //         }
        //       }
        //     }
        //   ]
        // });
      }
    }
  }
</script>

<style>
</style>
